<div class="table-responsive avatar-table" id="avatars-table">
  <div class="table-wrapper avatar-table-wrapper">
    <h3 class="table-title avatar-table-title">头像管理</h3>
    <table class="table table-hover avatar-table">
      <thead>
      <tr>
        <th>学生ID</th>
        <th>姓名</th>
        <th>头像</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody id="avatars-tbody">
      <!-- 使用 JavaScript 动态填充头像数据 -->
      </tbody>
    </table>
  </div>
</div>

<!-- 上传头像模态框 -->
<div class="modal fade" id="add-avatar-modal" tabindex="-1" role="dialog" aria-labelledby="add-avatar-modal-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-avatar-modal-label">上传头像</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="upload-avatar-form">
          <input type="hidden" id="student-id-input" name="studentId">
          <div class="form-group">
            <label for="avatar-file-input">选择头像图片</label>
            <input type="file" class="form-control-file" id="avatar-file-input" name="avatar" accept="image/*" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="submit-avatar-btn">上传头像</button>
      </div>
    </div>
  </div>
</div>